<template>
    <div v-if="img.length" class="box">
        <img :src="img" />
        <div class="name text">
            <span>{{ name }}</span>
            <span class="el-icon-delete" style="font-size: 0.25rem;" v-if="showdelete" @click="deletehandle"></span>
        </div>
        <div class="story text">{{ text }}</div>
    </div>
</template>

<script>
export default {
    props:{
        img:{type:String,default:''},
        name:{type:String, default:''},
        text:{type:String,default:''},
        showdelete:{type:Boolean,default:false},
    },
    methods:{
        deletehandle(evt){
            evt.stopPropagation()
            this.$emit('deleteExploration')
        }
    }
}
</script>
<style lang="scss" scoped>
img{
    width: 100%;
    height: 1.12rem
}
.box{
    width: 1.5rem;
    height: 1.6rem;
    background-color: white;
    border-radius: 5px;
    overflow: hidden;
    margin: 0.1rem 0.12rem;
}
.name{
    width: 100%;
    font-size: 20px;
    height: 0.25rem;
    display: flex;
    justify-content: space-between;
}
.text{
    color: rgb(124, 127, 126);
}
.story{
    width: 100%;
    overflow: hidden;
    height: 0.23rem;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>